'use strict'
import React, { Component, PropTypes } from 'react';



const Banner = React.createClass({


    render() {

        let category = this.props.data;

        return(



            <div className="section">
                <div className="cells_auto_fill">
                    <div data-index="0" className="body" style={{width: '5rem', height: '2rem'}}>
                        <div className="items J_linksign-customize" style={{width: '5rem', height: '2rem'}}>
                            <a className="exposure"  href="#">
                                <div className="img">
                                    <img className="lazy"  src={category.banner} style={{'transform-origin': '0px 0px 0px', opacity: 1, transform: 'scale(1, 1)'}}/>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        )

    }
})


const Product = React.createClass({

    render() {

        const subs = this.props.datas;

        return(

            <div className="section">
                <div className="category_group">
                    <div className="box">

                        {
                            subs.map((sub,i)=>{

                                return <div className="product">
                                            <a className="exposure"  href="#" >
                                                <div className="img">
                                                    <img className="big lazy"  src="" style={{'transform-origin': '0px 0px 0px', opacity: 1,transform: 'scale(1, 1)'}}/>
                                                </div>
                                                <div className="name">小米6</div>
                                            </a>
                                        </div>
                            })

                        }

                    </div>
                </div>
            </div>

        )

    }
})




class CategoryList extends Component {

    render() {

        let categorys = this.props.datas;


        return (

            <div className="list-wrap">

                {
                    categorys.map((item,index) =>{

                        return (
                                <div className={'jsListItem category'+index} ref={'jsListItem'+index} id={'category'+index}>
                                    <div className="f-list">
                                        <Banner data={item}/>

                                        {
                                            item.subs.map((child,i)=>{

                                                return(

                                                    <div>
                                                        <div className="section">
                                                            <div name="m1" className="category_title"><span>{child.name}</span></div>
                                                        </div>

                                                        <Product datas={child.subs}/>

                                                    </div>


                                                )

                                            })
                                        }

                                    </div>
                                </div>
                        )

                    })
                }

            </div>
        )

    }
}
export default CategoryList;